<template>
  <div id="classity">
    <div class="party"><i class="el-icon-document"></i>我的文章</div>
    <div class="party" @click="dialogFormVisible = true"><i class="el-icon-thumb" ></i>反馈问题</div>
    <el-dialog title="反馈问题" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="问题描述" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">确 定</el-button>
        </div>
    </el-dialog>

  </div>
</template>
<script>
import { Beedback } from "@/service/Api.js";
export default {
  name: "classify",
  data() {
      return {
        dialogFormVisible: false,
        form: {
          name: '',
        },
        formLabelWidth: '120px'
      };
    },
    methods:{
        submit(){
            this.dialogFormVisible = false
            Beedback({back_sub:this.form.name}).then((res)=>{
                console.log(res)
            })           
        }

    },
    created(){}
};
</script>
<style scoped>
#classity {
  height: auto;
  margin-top: 8px;
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.04);
  margin-bottom: 60px;
}
i {
  font-size: 18px;
  margin-right: 12px;
}
.party {
  height: 40px;
  line-height: 40px;
  margin-left: 8px;
  width: 100%-8px;
  color: #8590a6;
  font-size: 16px;
  transition: all 0.6s;
  overflow: hidden;
}
.party:hover {
  background-color: rgb(250, 250, 255);
  cursor: pointer;
  transform: scale(1.03);
}
</style>